<template>
  <ul class="top-menu">
    <li @click="go('home')" :class="{'active':routeName == 'home'}"><span>首页</span></li>
    <li @click="go('redCloudHeadline')" :class="{'active':routeName == 'redCloudHeadline'}"><span>红云头条</span></li>
    <li @click="go('longVideo')" :class="{'active':routeName == 'longVideo'}"><span>红云视听</span></li>
    <li @click="go('demandSurveyFeedback')" :class="{'active':routeName == 'demandSurveyFeedback'}"><span>红云信箱</span></li>
  </ul>
</template>

<script>
  export default {
    name: '',
    props: ['id', 'data'],
    components: {
    },
    data () {
      return {
        routeName: ''
      }
    },
    created () {
      this.routeName = this.$route.name
    },
    methods: {
      go (name) {
        this.$router.push({name: name})
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/common/stylus/moon.scss";
  /*.top-menu {
    display:flex;
    justify-content:space-around;
    padding:0 pxToRem(0px);
    background:rgba(255,255,255,1);
    li {
      font-size:15PX;
      font-weight:400;
      width:20%;
      flex-shrink:0;
      text-align: center;
      color:rgba(0,0,0,1);
      padding:pxToRem(10px) 0;
      line-height:pxToRem(60px);
      &.active {
        border-bottom:2PX solid $theme-color;
        font-weight:bold;
        color:rgba(226,0,1,1);
      }
    }
  }*/
</style>
